<link rel="stylesheet" type="text/css" href="/assets/third-party/datatables/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/assets/css/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="/assets/third-party/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="/assets/third-party/select2-3.5.1/select2.css">

<style type="text/css">
	.il{
		display: inline;
	}
	.form-group .control-label{
		padding-right: 5px;
	}
	.form-group .col-sm-7{
		padding-left: 5px;
	}
	.form-group input, .form-group select{
		width: 88%;
		display: inline;
	}
</style>

<div class="container" style="margin-top: 60px;">
	<div class="row">
		<div class="col-lg-12">
			<form action="/admin/employee" method="get">
				<?php $notices = array('lgIGbcPTdUXbJLzbt3k-2X02SPp5pfFE9x5c9_7B6I0' => '职员注册通知', '7QM2egZPTPe8PXqz5h_Q7eWX3gPfgCRyAO9ZBZ786Uk' => '职员报名通知'); ?>
				<select name="notice" class="form-control il" style="width: 140px;">
					<option value="">全部职员</option>
					<?php foreach ($notices as $key => $value) { ?>
						<option value="<?php echo $key; ?>"><?php echo $value; ?></option>
					<?php } ?>
				</select>
				<button type="submit" class="btn btn-info"> <i class="fa fa-search"></i> 查询 </button>
				<a class="btn btn-success" data-toggle="modal" data-target="#employeeModal" role="add"> <i class="fa fa-plus"></i> 新增职员 </a>
			</form>
			
			
			<!--<a href="#" class="btn btn-success"> <i class="fa fa-plus"></i> 全选 </a>
			<a href="#" class="btn btn-danger"> <i class="fa fa-plus"></i> 批量删除 </a>
			<a href="#" class="btn btn-danger"> <i class="fa fa-plus"></i> 刷新 </a>-->
		</div>
	</div>
	<div class="row" style="margin-top: 10px;">
		<div class="col-lg-12">
			<div class="panel panel-default">
                <div class="panel-heading">
                    职员列表
                </div>
                <!-- /.panel-heading -->
                <div class="panel-body">
					<table id="employeeList" class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>ID</th>
								<th>职员编号</th>
								<th>姓名</th>
								<th>手机号码</th>
								<th>微信状态</th>
								<th>通知列表</th>
								<th>创建时间</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<?php foreach ($items as $key => $value) { ?>
							<tr data-id="<?php echo $value->id; ?>">
								<td><?php echo $value->id; ?></td>
								<td><?php echo $value->no; ?></td>
								<td><?php echo $value->people ? $value->people->first_name . $value->people->last_name : '-'; ?></td>
								<td><?php echo $value->work_phone; ?></td>
								<td><?php echo $value->people && $value->people->wechats ? current($value->people->wechats)->openid : "未绑定 【<a href='javascript:alert(\"请在微信中发送 “绑定 {$value->id}”" . ($value->work_phone ? " 或 “绑定 {$value->work_phone}”" : '') . "\");' >点击查看绑定方法</a>】"; ?></td>
								<td>
									<?php
									if(isset($value->notices)){
										foreach (explode(',', $value->notices) as $item) {
											foreach ($notices as $k => $v) {
												if($k == $item){
													echo $v . ",";
													break;
												}
											}
										}
									}
									?>
								</td>
								<td><?php echo date('Y-m-d H:i:s', $value->created_at); ?></td>
								<td>
									<a role="edit" class="btn btn-sm btn-info" data-toggle="modal" data-target="#employeeModal"> <i class="fa fa-pencil-square-o"></i> 编辑 </a>
									<a href="#" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#confirmModal"> <i class="fa fa-trash-o"></i> 删除 </a>
								</td>
							</tr>
							<?php } ?>							
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 职员详情模态框 -->
<div class="modal fade" id="employeeModal" tabindex="-1" role="dialog" aria-labelledby="employeeModalTitle" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title" id="employeeModalTitle"> 职员资料 </h4>
			</div>
			<div class="modal-body">
				<form id="frmEmployee" role="form" action="/admin/employee/edit" method="post" data-parsley-validate>
					<div class="form-group">
						<label for="no">职员编号</label>
						<input type="text" class="form-control" id="no" name="no" placeholder="系统自动生成的职员编号" value="" required>
					</div>
					<div class="form-group">
						<label for="first_name">职员姓名</label>
						<input type="text" class="form-control" id="first_name" name="first_name" placeholder="姓(微信绑定后才可填写)" style="width: 44%; display: inline;" data-parsley-errors-container="#name_help_block">
						<input type="text" class="form-control" id="last_name" name="last_name" placeholder="名(微信绑定后才可填写)" style="width: 44%; display: inline;">
						<p id="name_help_block"></p>
					</div>
					<div class="form-group">
						<label for="gender">职员性别</label>
						<select id="gender" name="gender" class="form-control">
							<option value="">保密</option>
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
					</div>
					<div class="form-group">
						<label for="phone">手机号码</label>
						<input type="text" class="form-control" id="phone" name="work_phone" placeholder="手机号码" required>
					</div>
					<div class="form-group">
						<label for="setting_wechat">微信状态</label>
						<select name="setting_wechat" class="form-control">
							<option value="1">启用绑定</option>
							<option value="0" selected="selected">禁止绑定</option>
						</select>
					</div>
					<div class="form-group">
						<label for="qq">通知选项</label>
						<select id="notices" multiple="multiple" style="width: 88%;">
							<?php foreach ($notices as $key => $value) { ?>
								<option value="<?php echo $key; ?>"><?php echo $value; ?></option>
							<?php } ?>
						</select>
						<input type="hidden" name="notices" value=""/>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
				<button type="button" id="btnSave" class="btn btn-primary"> 保存 </button>
			</div>
		</div>
	</div>
</div>

<!-- 确认删除模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				<div class="alert alert-warning">
					<strong>确定删除？</strong>
					<p>删除该职员，所有与该职员相关的数据将全部被清空!</p>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
				<button type="button" id="btnConfirm" class="btn btn-danger"> 确定 </button>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="/assets/third-party/jquery-tmpl-master/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="/assets/third-party/jquery-tmpl-master/jquery.tmplPlus.min.js"></script>
<script type="text/x-jquery-tmpl" id="tr">
<tr>
	<td>${id}</td>
	<td><span class="hide">${name}</span><input type="text" value="${name}" placeholder="级别名称"  style="width: 70px;"/></td>
	<td><span class="hide">${sort}</span><input type="text" value="${sort}" placeholder="排序" style="width: 30px;" /></td>
	<td>
		<a role="save" class="btn btn-sm btn-success"> <i class="fa fa-check"></i> 保存 </a>
		<a role="edit" class="btn btn-sm btn-info hide"> <i class="fa fa-pencil-square-o"></i> 编辑 </a>
		<a role="del" class="btn btn-sm btn-danger hide"> <i class="fa fa-trash-o"></i> 删除 </a>
	</td>
</tr>
</script>

<script type="text/javascript" src="/assets/third-party/datatables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/assets/js/dataTables.bootstrap.js"></script>
<script type="text/javascript">
	var flag = false;
	$(function(){

		$('.table').dataTable({
	        "oLanguage": {
	            "sLengthMenu": "每页显示 _MENU_ 条记录",
	            "sZeroRecords": "很抱歉，未找到相关数据",
	            "sInfo": "从 _START_ 至 _END_ /共 _TOTAL_ 条数据",
	            "sInfoEmpty": "没有符合条件的数据",
	            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
	            "sSearch": "搜索：",
	            "oPaginate": {  
					"sFirst": "首页",  
					"sPrevious": "上一页",
					"sNext": "下一页",
					"sLast": "末页"
				}  
	        },
	        fnDrawCallback: function(){

	            if(window.flag == false){
	        		window.flag = true;
	        		var index = localStorage.getItem('pagination_index');
	                localStorage.removeItem('pagination_index');
		        	if( ! index){
		        		index = 1;
		        	}
		        	index -= 1;

		        	$('.table').dataTable().fnPageChange(index);
	                
	        	}
            }
	    });

		$(document).delegate('a[data-target="#employeeModal"]', 'click', function(){
	    	if($(this).attr('role') == 'add'){
	    		$('#first_name').attr('readonly', 'readonly');
		    	$('#last_name').attr('readonly', 'readonly');
		    	$('#gender').attr('readonly', 'readonly');
	    	}

	    	$('input[name="no"]').val(Date.parse(new Date()) / 1000);
	    	$('#first_name').val('');
	    	$('#last_name').val('');
	    	$('#gender').val('');
	    	$('#phone').val("");
	    	$('#notices').select2("val", "");

	    	if($(this).attr('role') == 'edit'){
	    		localStorage.setItem('pagination_index', $('.pagination .active').find('a').text());
	    		$('#frmEmployee').attr('action', '/admin/employee/edit/' + $(this).parents('tr').attr('data-id'));
	    		$.get('/admin/employee/view/' + $(this).parent().parent().attr('data-id'), 
	    			function(data, status){
	    				if(data.status == 'succ'){
	    					var item = data.data;
	    					$('#no').val(item.no);
	    					if(item.people == undefined){
						    	$('#first_name').attr('readonly', 'readonly');
						    	$('#last_name').attr('readonly', 'readonly');
						    	$('#gender').attr('readonly', 'readonly');
	    					}else{
						    	$('#first_name').removeAttr('readonly');
						    	$('#last_name').removeAttr('readonly');
						    	$('#gender').removeAttr('readonly');
						    	$('#first_name').val(item.people.first_name);
						    	$('#last_name').val(item.people.last_name);
						    	$('#gender').val(item.people.gender);
	    					}
					    	$('#phone').val(item.work_phone);
					    	$('#notices').select2('val', item.notices.split(','));
	    				}
	    			}, 'json');
	    	}else{
	    		$('#frmEmployee').attr('action', '/admin/employee/create/');
	    	}
	    });

		$('table').delegate('a[data-target="#confirmModal"]', 'click', function(){
	    	$('#btnConfirm').attr('data-id', $(this).parent().parent().attr('data-id'));
	    });

	    $('#btnConfirm').click(function(){
	    	var id = $(this).attr('data-id');
	    	$.get('/admin/employee/delete/' + id,
	    		function(data, status){
	    			if(data.status == 'succ'){
	    				$('#employeeList').find('tr[data-id="' + id + '"]').remove();
	    				$('#confirmModal').modal('hide');
	    			}
	    		}, 'json');
	    });
	});
</script>

<script type="text/javascript" src="/assets/third-party/parsley/parsley.min.js"></script>
<script type="text/javascript" src="/assets/third-party/parsley/i18n/zh_cn.js"></script>
<script type="text/javascript" src="/assets/third-party/parsley/i18n/zh_cn.extra.js"></script>
<script type="text/javascript">
	$(function(){
		$('#btnSave').click(function(){
			$('input[name="notices"]').val($('#notices').select2('val'));
			$('#frmEmployee').submit();
		});
	});
</script>

<script type="text/javascript" src="/assets/third-party/select2-3.5.1/select2.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#notices").select2({placeholder: "微信通知事项"});
	});
</script>